<template>
  <div class="code-assistant">
      <div class="code-left">
        <div class="code-left-top">
          <div class="title-test">当前会话：<span>{{ codeTitle }}</span></div>
          <div class="title-input">
            <el-form ref="form" :model="form1" label-width="50px">
              <el-form-item label="语言">
                <el-select v-model="form1.region" placeholder="请选择活动区域">
                  <el-option label="Python" value="python"></el-option>
                  <el-option label="Js" value="js"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="code-left-container container">
          <div class="box code-left-container-box">
            <div class="list">
              <div class="item" v-for="item in list" :key="item.id"  @contextmenu.prevent="showContextMenu($event, item)">
                <div contenteditable @mouseup="handleMouseUp" @mousedown="clearSelection">{{ item.message }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="code-left-bottom">
          <div><el-button type="primary" plain>上传代码</el-button></div>
          <div><el-button type="success" plain>保存代码</el-button></div>
        </div>
      </div>
      <div class="code-right">
        <div class="code-right-top">
          <el-form ref="form" :model="form2" label-width="50px">
            <el-form-item label="模型">
              <el-select v-model="form2.region" placeholder="请选择活动区域">
                <el-option label="Qwen" value="qwen"></el-option>
                <el-option label="Swen" value="swen"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="code-right-container container">
          <div class="box">
            <div class="right-list">
              <div class="item" v-for="item in rightList" :key="item.id">
                <div class="box-time">{{ item.messagTime}}</div>
                <div v-if="item.type === 'user'" class="box-user">{{ item.message }}</div>
                <div v-if="item.type === 'ai'" class="box-ai">{{ item.message }}</div>
              </div>
              <ul v-if="isContextMenuVisible" class="context-menu" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
                <li @click="showCodeExplanation">代码注释</li>
                <li @click="showCodeExplanation">代码解释</li>
                <li @click="showCodeExplanation">代码优化</li>
                <li @click="showCodeExplanation">测试⽤例</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="code-right-bottom">
          <el-row class="footer-bg" :gutter="10">
            <el-col :span="21">
              <el-input v-model="message" @keyup.enter="sendMessage"  placeholder="请输入你的问题"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="sendMessage">发送</el-button>
            </el-col>
          </el-row>
          <div class="bottom-menu" v-if="message === '/'">
            <ul class="bottom-menu-list">
              <li @click="boxHandleSend('/代码注释/')">代码注释</li>
              <li @click="boxHandleSend('/代码解释/')">代码解释</li>
              <li @click="boxHandleSend('/代码优化/')">代码优化</li>
              <li @click="boxHandleSend('/测试⽤例/')">测试⽤例</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import {} from "@/api/conversationGroup/group";
import { mapState } from "vuex";

export default {
  name: "codeAssistant",
  data() {
    return {
      isContextMenuVisible: false,
      contextMenuX: 0,
      contextMenuY: 0,
      selectedText: "", // 新增变量，用于存储选中文本
      message: "",
      form1: {
        region: 'python',
      },
      form2: {
        region: 'qwen',
      },
      list: [
        {
          id: 1,
          message: '这是第一条消息',
        },
        {
          id: 2,
          message: '<Button onClick={toggleShow}>Toggle Show State</Button>',
        },
      ],
      rightList: [
        {id: 1, message: 'js有哪些自定义方法', messagTime: '2024-09-11',type: "user"},
        {id: 2, message: '<Button onClick={toggleShow}>Toggle Show State</Button>', messagTime: '2024-09-11',type:"ai"},
      ]
    };
  },
  computed: {
    ...mapState('code',['codeTitle']),
  },
  methods: {
    sendMessage() {
      // 平滑滚动到.container的底部
      this.$nextTick(() => {
        document.querySelector('.container').scrollTop = 0
      })
    },
    showContextMenu(event,item) {
      this.contextMenuX = event.clientX - 200;
      this.contextMenuY = event.clientY - 60;
      this.isContextMenuVisible = true;

      // 隐藏上下文菜单
      document.addEventListener('click', this.hideContextMenu);
    },
    hideContextMenu() {
      this.isContextMenuVisible = false;
      document.removeEventListener('click', this.hideContextMenu);
    },
    showCodeExplanation() {
      this.hideContextMenu();
      console.log('this.selectedText',this.selectedText);
      this.rightList.push({
        id: this.rightList.length + 1,
        message: this.selectedText,
        messagTime: '2024-09-11',
        type: "user"
      })
    },

    handleMouseUp(event) {
      // 获取选中的文本
      const selection = window.getSelection();
      console.log('selection',selection.getRangeAt(0));
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        this.selectedText = range.toString();
      }
    },
    clearSelection() {
      // 清除选中文本
      this.selectedText = "";
    },

    boxHandleSend(value){
      this.message = value
    }

  }
};
</script>
<style lang="scss" scoped>
.code-assistant{
  width: 100%;
  height: calc(100vh - 84px);
  display: flex;
  .code-left{
    width: 50%;
    border-right: 2px solid #ccc;
    .code-left-top{
      height: 40px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .title-input{
        margin-right: 15px;
      }
      .title-test{
        font-size: 14px;
        line-height: 40px;
        margin-left: 15px;
        font-weight: bold;
        color: #606266;
        span{
          color: #7365ff;
          font-size: 16px;
        }
      }
    }
    .code-left-container{
      height: calc(100vh - 184px);
      .code-left-container-box{
        margin-top: 10px;
        .item{
          line-height: 24px;
        }
      }
    }
    .code-left-bottom{
      height: 50px;
      background-color: #e5e5e5;
      display: flex;
      align-items: center;
      justify-content: space-around
    }
  }
  .code-right{
    width: 50%;
    .code-right-top{
      height: 40px;
      margin-top: 10px;
    }
    .code-right-container{
      height: calc(100vh - 184px);
    }
    .code-right-bottom{
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      position: relative;
      .footer-bg{
        width: 100%;
      }
      .bottom-menu{
        position: absolute;
        top: -150px;
        left: 10px;
        .bottom-menu-list{
          list-style: none;
          background-color: white;
          border: 1px solid #ccc;
          padding: 0;
          li {
            padding: 5px 10px;
            cursor: pointer;
          }
          li:hover {
            background-color: #f0f0f0;
          }
        }
      }
    }
  }
}

.container {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
  padding: 0 16px;
  scroll-behavior: smooth;
  .box {
    width: 100%;
    flex: 1 1;
    align-self: center;
    display: flex;
    flex-direction: column;
    .list {
      display: flex;
      flex-direction: column;
    }
    .right-list{
      display: flex;
      flex-direction: column;
    }
  }
}

.item{
  font-size: 12px;
  .box-user{
    white-space: pre-wrap;
    display: inline-block;
    max-width: 87%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 15px;
    background-color: #7365ff;
    position: relative;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: .6px;
    color: #fafafa;
    text-align: left;
    border-radius: 20px;
    border-bottom-right-radius: 4px;
    word-break: break-all;
    font-size: 12px;
  }     
  .box-ai{
    max-width: 87%;
    background-color: #f5f5f5;
    border-radius: 6px 20px 20px 20px;
    min-height: 25px;
    padding: 10px 15px;
    font-size: 12px;
    .red{
    color: red;
    }
  }
  .box-time{
    margin: 17px 0 5px 10px;
    color: #ccc;
  }
}

.context-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

.context-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}
</style>
